<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="./css/aui.css" />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <link rel="stylesheet" type="text/css" href="./css/aui-slide.css" />
    <script type="text/javascript" src="./script/jquery.min.js"></script>
    <script type="text/javascript" src="./script/doT.min.js"></script>
    <script type="text/javascript" src="./script/base.js"></script>
    <script type="text/javascript" src="./script/api.js"></script>
</head>

<body>
    <div id="list">
      <header class="aui-bar aui-bar-nav">
          <a class="aui-pull-left" tapmode onclick="closeWin()">
              <span class="aui-iconfont aui-icon-left"></span>
          </a>
          <div class="aui-title"></div>
      </header>
      <div class="aui-bar-nav-d"></div>

      <div class="licai-buy-t">
          <dl>
              <dd>预期年化收益</dd>
              <dt>%</dt>
          </dl>
          <ul>
              <li>
                  <p><span display:inline; class="money" id="xiangmuzonge"></span>元</p>
                  项目总额
              </li>
              <li>
                  <p><span display:inline; class="money"></span>元</p>
                  起投金额
              </li>
              <li>
                  <p>月</p>
                  投资期限
              </li>
          </ul>
          <div class="licai-buy-t-d">
              <div class="licai-buy-t-d-t" id="baifenshu"></div>
              <div class="aui-progress aui-progress-xs">
                  <div class="aui-progress-bar"></div>
              </div>
              <p>
                  已售出：
                  <p1 class="money" id="yishouchu"></p1>元
                  <span>剩余：<p2 class="money"></p2>元</span>
              </p>
          </div>
      </div>
      <div class="licai-buy-1">
          <div class="licai-buy-1-t">
              <img src="image/licai-buy-1-t.png"> 周期收益
          </div>
          <ul class="licai-buy-1-2">
              <li>
                  <span>购买成功</span>
                  <img src="image/licai-buy-1-1.png">
                  <p></p>
              </li>
              <i></i>
              <li>
                  <span>信息审核</span>
                  <img src="image/licai-buy-1-4.png">
                  <p></p>
              </li>
              <i></i>
              <li>
                  <span>起息日期</span>
                  <img src="image/licai-buy-1-3.png">
                  <p></p>
              </li>
              <i></i>
              <li>
                  <span>本息到账</span>
                  <img src="image/licai-buy-1-3.png">
                  <p></p>
              </li>
          </ul>
      </div>
      <ul class="aui-list aui-list-in user-list" style="margin-top:0.5rem;">
          <li class="aui-list-item aui-list-item-middle" tapmode onclick="licai_buy_record()">
              <div class="aui-list-item-inner aui-list-item-arrow">
                  <div class="aui-list-item-title">购买记录</div>
                  <div class="aui-list-item-right">已有人购买</div>
              </div>
          </li>
          </li>
          <li class="aui-list-item">
              <div class="aui-list-item-inner aui-list-item-arrow">
                  <div class="aui-list-item-title">产品详情</div>
              </div>
          </li>
          <li class="aui-list-item">
              <div class="aui-list-item-inner aui-list-item-arrow">
                  <div class="aui-list-item-title">常见问题</div>
              </div>
          </li>
      </ul>
    </div>
    <div class="licai-d-btn-t"></div>
    <div class="licai-d-btn" tapmode id="weidenglu" onclick="weidenglu();">请登录</div>
    <!-- <div class="licai-d-btn" tapmode id="weikaitong" style="display: none;" onclick="weikaitong();">请前往开通存管账户</div> -->
    <div class="licai-d-btn" tapmode style="display: none;" id="kegoumai" onclick="znlc_buy_details()">立即购买</div>
</body>

<script type="text/template" id="template">
    <header class="aui-bar aui-bar-nav">
        <a class="aui-pull-left" tapmode onclick="closeWin()">
            <span class="aui-iconfont aui-icon-left"></span>
        </a>
        <div class="aui-title">{{=it.name}}</div>
    </header>
    <div class="aui-bar-nav-d"></div>

    <div class="licai-buy-t">
        <dl>
            <dd>预期年化收益</dd>
            <dt>{{=it.rate}}%</dt>
        </dl>
        <ul>
            <li>
                <p><span display:inline; class="money" id="xiangmuzonge">{{=it.total_amount}}</span>元</p>
                项目总额
            </li>
            <li>
                <p><span display:inline; class="money">{{=it.min_money_format_num}}</span>元</p>
                起投金额
            </li>
            <li>
                <p>{{=it.time_limit}}个月</p>
                投资期限
            </li>
        </ul>
        <div class="licai-buy-t-d">
            <div class="licai-buy-t-d-t" id="baifenshu"></div>
            <div class="aui-progress aui-progress-xs">
                <div class="aui-progress-bar"></div>
            </div>
            <p>
                已售出：
                <p1 class="money" id="yishouchu">{{=it.buy_amount}}</p1>元
                <span>剩余：<p2 class="money">{{=it.borrow_amount}}</p2>元</span>
            </p>
        </div>
    </div>
    <div class="licai-buy-1">
        <div class="licai-buy-1-t">
            <img src="image/licai-buy-1-t.png"> 周期收益
        </div>
        <ul class="licai-buy-1-2">
            <li>
                <span>购买成功</span>
                <img src="image/licai-buy-1-1.png">
                <p>{{=it.date_1}}</p>
            </li>
            <i></i>
            <li>
                <span>信息审核</span>
                <img src="image/licai-buy-1-4.png">
                <p>{{=it.date_2}}</p>
            </li>
            <i></i>
            <li>
                <span>起息日期</span>
                <img src="image/licai-buy-1-3.png">
                <p>{{=it.date_3}}</p>
            </li>
            <i></i>
            <li>
                <span>本息到账</span>
                <img src="image/licai-buy-1-3.png">
                <p>{{=it.date_4}}</p>
            </li>
        </ul>
    </div>
    <ul class="aui-list aui-list-in user-list" style="margin-top:0.5rem;">
        <li class="aui-list-item aui-list-item-middle" tapmode onclick="licai_buy_record({{=it.time_limit}})">
            <div class="aui-list-item-inner aui-list-item-arrow">
                <div class="aui-list-item-title">购买记录</div>
                <div class="aui-list-item-right">已有{{=it.load_count}}人购买</div>
            </div>
        </li>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner aui-list-item-arrow" onclick="chanpinxiangqing();">
                <div class="aui-list-item-title">产品详情</div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner aui-list-item-arrow" onclick="more_ques();">
                <div class="aui-list-item-title">常见问题</div>
            </div>
        </li>
    </ul>
</script>

<script type="text/javascript">
    var load_count = '';
    var min_money_format_num = '';
    var borrow_amount = '';
    var rate = '';
    var rate_month = '';
    var time_limit = '';
    var add_money = '';

    apiready = function() {
        id = api.pageParam.id;
        load_list(id);
    }

    function znlc_buy_details() {
        var delay = 0;
        if (api.systemType != 'ios') {
            // delay = 300;
        }

        if (borrow_amount == 0) {
            api.toast({
                msg: '没有可投金额，无法购买',
                duration: 2000,
                location: 'bottom'
            });
            return false;
        }

        api.openWin({
            name: 'znlc_buy_details',
            url: './znlc_buy_details.html',
            pageParam: {
                borrow_amount: borrow_amount, // 可投金额
                min_money_format_num: min_money_format_num, // 起投金额
                rate: rate, // 总利率
                rate_month: rate_month, // 分利率
                time_limit: time_limit, // 期限
                id: id, // id
                add_money: add_money, // 加减金额数
                name: name // 项目名称
            }
        });
    };

    function licai_buy_record(id) {
        var delay = 0;
        if (api.systemType != 'ios') {
            // delay = 300;
        }
        api.openWin({
            name: 'licai_buy_record',
            url: './licai_buy_record.html',
            pageParam: {
                id: id,
                load_count: load_count,
            }
        });

    };

    function closeWin() {
        api.closeWin({});
    }

    // 加载列表
    function load_list(id) {

        api.showProgress({
            style: 'default',
            animationType: 'fade',
            title: '努力加载中...',
            text: '先喝杯茶...',
            modal: false
        });

        api.ajax({
            url: webAddress + '/index.php?ctl=app_deal2&act=licai&id=' + id,
            method: 'get',
        }, function(ret, err) {

            if (ret) {
                if (ret.status == 0) {
                    alert(ret.info);
                } else {
                    api.hideProgress();

                    load_count = ret.load_count;
                    min_money_format_num = ret.min_money_format_num;
                    borrow_amount = ret.borrow_amount;
                    rate = ret.rate;
                    rate_month = ret.rate_month;
                    time_limit = ret.time_limit;
                    // alert(ret.add_money);
                    add_money = ret.add_money;
                    name = ret.name;

                    var num = ret.load_list;
                    updateList(ret, num.length);
                }
            } else {
                // alert( JSON.stringify( err ) );
                alert(err.msg);
                api.hideProgress();
                api.closeWin({});
            }
        });
    }

    // doT
    function updateList(data, num) {

        // alert($api.getStorage('userid'));
        // alert($api.getStorage('is_hrb'));

        if ($api.getStorage('userid') == null || $api.getStorage('userid') == '') {
            // $('#weikaitong').hide();
            $('#kegoumai').hide();
            $('#weidenglu').show();
        } else {
           $('#kegoumai').show();

            // if (!$api.getStorage('is_hrb')) {
            //     $('#weidenglu').hide();
            //     $('#kegoumai').hide();
            //     $('#weikaitong').show();
            // } else {
            //     $('#weikaitong').hide();
            //     $('#weidenglu').hide();
            //     $('#kegoumai').show();
            // }
        }

        var template = $api.byId('template');
        var dotFn = doT.template(template.innerHTML);
        var html = dotFn(data);
        var list = $api.byId('list');
        $api.html(list, html);
        var xiangmuzonge = $("#xiangmuzonge").text();
        var yishouchu = $("#yishouchu").text();
        var baifenbi = (yishouchu / xiangmuzonge * 100).toFixed(2);
        $(".licai-buy-t-d-t").text(baifenbi + "%");
        $(".money").each(function() {
            // alert($(this).text());
            var tmp = outputmoney($(this).text());
            $(this).text(tmp);
        });
        // 进度条同步
        var licainum = $(".licai-buy-t-d-t").html();
        $(".licai-buy-t-d-t").css("left", licainum);
        $(".aui-progress-bar").css("width", licainum);
    }

    // 未登录
    function weidenglu() {
        // 跳转登录页面
        // api.openFrame({
        //     name: 'login',
        //     url: './login.html',
        //     rect: {
        //         x: 0,
        //         y: 0,
        //         w: 'auto',
        //         h: 'auto'
        //     },
        //     pageParam: {
        //         login: 'licai'
        //     },
        //     bounces: false,
        //     bgColor: 'rgba(0,0,0,0)',
        //     vScrollBarEnabled: true,
        //     hScrollBarEnabled: true
        // });
        api.openWin({
            name: 'login',
            url: './login.html',
            pageParam: {
                login: 'znlc_buy',
                id: id,
            }
        });
    }

    function licainum() {

    }

    function more_ques() {

      api.openWin({
          name: 'more_ques',
          url: './more_ques.html',
          pageParam: {
              name: 'test'
          }
      });

    }

    function chanpinxiangqing() {

        api.openWin({
            name: 'licai-chanpinxiangqing',
            url: './licai-chanpinxiangqing.html',
            pageParam: {
                id: id
            }
        });
    }
</script>

</html>
